<template>
    <div>
        <div id="map" class="map-container"></div>
        <div class="btn">
            <button class="up" @click="up">上👆</button>
            <button class="down" @click="down">下👇</button>
            <button class="rotate" @click="rotate">旋转</button>
            <button class="to_beijing" @click="to_beijing">到北京</button>
        </div>
        <!-- 图层切换按钮 -->
        <div class="layer-switch">
            <button class="image-layer" @click="switchImageLayer">
                图片图层
            </button>
            <button class="marker-layer" @click="switchMarkerLayer">
                标记图层
            </button>
            <button class="tile-layer" @click="switchTileLayer">
                瓦片图层
            </button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue"; // 确保 DOM 加载完成
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import VectorLayer from "ol/layer/Vector";
import Style from "ol/style/Style.js";
import GeoJSON from "ol/format/GeoJSON.js";
import XYZ from "ol/source/XYZ";
import Static from "ol/source/ImageStatic";
import VectorSource from "ol/source/Vector";
import Fill from "ol/style/Fill";
import { Style, CircleStyle, Fill, Stroke, Icon } from "ol/style";
const map = ref(null);
const imageLayer = ref(null);
const markerLayer = ref(null);
const tileLayer = ref(null);
// 中国地图
const layerChina = ref(null);
const view = ref(null);
const image = ref(null);

onMounted(() => {
    imageLayer.value = new TileLayer({
        source: new XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
        }),
    });

    // 标记图层
    markerLayer.value = new TileLayer({
        source: new XYZ({
            url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        }),
    });
    // 瓦片图层
    tileLayer.value = new TileLayer({
        source: new XYZ({
            url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
        }),
    });
    layerChina.value = new VectorLayer({
        source: new VectorSource({
            url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
            format: new GeoJSON(),
        }),
        style: new Style({
            fill: new Fill({
                color: "rgba(0,0,222,0.5)",
            }),
        }),
    });
    let imgExtent = [114.21 - 1, 30.52 - 1, 114.21 + 1, 30.52 + 1];
    let imgUrl = "../../public/111.jpg";
    image.value = new ImageLayer({
        source: new Static({
            url: imgUrl,
            imageExtent: imgExtent,
            crossOrigin: "anonymous",
        }),
    });

    (view.value = new View({
        // center: [12716000, 3570000], // 武汉的 EPSG:3857 坐标
        // projection: 'EPSG:3857',
        center: [114.21, 30.52],
        projection: "EPSG:4326",
        zoom: 10,
    })),
        (map.value = new Map({
            target: "map", // 绑定到 id="map" 的容器
            view: view.value,
            layers: [tileLayer.value],
        }));
    // const map = new Map({
    //     target: "map",
    //     view: new View({
    //         center: [114.21, 30.52],
    //         projection: "EPSG:4326",
    //         zoom: 10,
    //     }),
    //     layers: [
    //         new TileLayer({
    //             source: new XYZ({
    //                 url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
    //             }),
    //         }),
    //     ],
    // });

    map.value.addLayer(imageLayer.value);
    map.value.addLayer(markerLayer.value);
    // map.value.addLayer(image.value);
    map.value.addLayer(layerChina.value);

    const layers = map.value.getLayers();
    console.log(layers.item(3).getSource());
    map.value
        .getLayers()
        .item(3)
        .getSource()
        .on("change", function (event) {
            console.log(this.getFeatures());
        });

    map.value.on("click", clickMap);
});
const up = () => {
    let view = map.value.getView();
    let center = view.getCenter();
    view.setCenter([center[0], center[1] + 0.1]);
    map.value.render();
};
const down = () => {
    let view = map.value.getView();
    let center = view.getCenter();
    view.setCenter([center[0], center[1] - 0.1]);
    map.value.render();
};
const rotate = () => {
    let view = map.value.getView();
    let rotation = view.getRotation();
    console.log(rotation);
    rotation += Math.PI / 4;
    view.setRotation(rotation);
    map.value.render();
};
const to_beijing = () => {
    let view = map.value.getView();
    view.animate({
        center: [116.39, 39.9],
        duration: 2000,
        zoom: 12,
    });
};

const switchImageLayer = () => {
    // // 通过设置zindex调整渲染顺序
    // imageLayer.value.setZIndex(100);
    // markerLayer.value.setZIndex(0);
    // tileLayer.value.setZIndex(0);
    // 通过设置visible调整图层显示
    imageLayer.value.setVisible(true);
    markerLayer.value.setVisible(false);
    tileLayer.value.setVisible(false);
};
const switchMarkerLayer = () => {
    // // 通过设置zindex调整渲染顺序
    // markerLayer.value.setZIndex(100);
    // imageLayer.value.setZIndex(0);
    // tileLayer.value.setZIndex(2);
    // 通过设置visible调整图层显示
    imageLayer.value.setVisible(false);
    markerLayer.value.setVisible(true);
    tileLayer.value.setVisible(false);
};
const switchTileLayer = () => {
    // // 通过设置zindex调整渲染顺序
    // tileLayer.value.setZIndex(100);
    // imageLayer.value.setZIndex(0);
    // markerLayer.value.setZIndex(0);
    // 通过设置visible调整图层显示
    imageLayer.value.setVisible(false);
    markerLayer.value.setVisible(false);
    tileLayer.value.setVisible(true);
};
const clickMap = (event) => {
    let coordinate = event.coordinate;
    let source = layerChina.value.getSource();
    let allFeatures = source.getFeatures();
    allFeatures.forEach((feature) => {
        feature.setStyle();
    });
    let feature = source.getFeatureByCoordinate(coordinate);
    if (feature.length > 0) {
        let f = feature[0];
        f.setStyle(
            new Style({
                fill: new Fill({
                    color: "rgba(0,0,222,0.9)",
                }),
            })
        );
    }
    console.log(coordinate);
};
</script>

<style scoped>
.map-container {
    width: 100%;
    height: 700px;
    border: 1px solid #ccc;
}
.btn {
    position: absolute;
    top: 80px;
    left: 20px;
    display: flex;
    gap: 10px;
}
</style>
